react高阶组件-白红宇

1.首先介绍高阶函数

基本概念：

函数可以作为参数被传递：

函数可以作为返回值输出：

2.高阶组件

组件作为参数被传递，返回值是一个组件

高阶组件是一个函数

案例：将A组件作为公共组件，BC组件作为A函数的参数，来共享显示A组件

此处红框是A组件，红框里左边内容为B组件，右边内容为C组件

1.创建公共的A组件

将组件A封装成一个函数，接收一个参数，这个参数就是其他组件，

return的内容就是A组件的视图内容，

将其他组件要展示的位置，写成参数的标签，放置在那里，

最后导出A组件

import React,{Component} from 'react'function A(WrappedComponent) {    return class A extends Component{        render(){            return(                
                        
                             
      
       提示
      
                        
      
       x
      
                    
     
                    
                             
                          
     
                
    
            )        }    }}export default A复制代码

2.创建B组件

引入A组件，

写B组件的内容，

将B组件作为A组件的参数导出

import React,{Component} from 'react'import A from './A' class B extends Component{    render(){        return(            
                    
                 
    
        )    }}export default A(B)复制代码

3.同理创建C组件

import React,{Component} from 'react'import A from './A' class C extends Component{    render(){        return(            
                    
                 
    
        )    }}export default A(C)复制代码

4.将组件放置在App.js中展示

App.css中写入样式

import React, { Component } from 'react';import './App.css';import A from './components/A'import B from './components/B'import C from './components/C'class App extends Component {  render() {    return (      
             
               
               
           
    
    );  }}export default App;复制代码

5.完成即可见，BC展示的区域，是参数标签的部分